<template>
    <div>
        <label for="num1">请输入第1个数字：</label>
        <input type="number" id="num1" v-model="num1"/><br/>
        <label for="num1">请输入第2个数字：</label>
        <input type="number" id="num2" v-model="num2"/><br/>
        <button @click="compareNumbers">比较</button>
    </div>
    <div v-if="result">{{ result }}</div>
</template>
<script setup>
    import { ref } from 'vue'
    //定义响应式数据
    const num1 =ref('');
    const num2 =ref('');
    const result =ref('');
    //实现比较数字大小
    const compareNumbers=() =>{
        const num1Value =parseFloat(num1.value);
        const num2Value =parseFloat(num2.value);
        if(num1Value > num2Value){
            result.value="比较结果：第一个数字大";
        }else if(num1Value < num2Value){
            result.value="比较结果：第二个数字大";
        }else{
            result.value="比较结果：两数字相等";
        }
    }
</script>